<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {{template "common/head.html"}}
</head>

<body>
    <img src="/static/images/header.jpg" width="100%" />
    <div class="container" style="margin-top: 30px;">
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-6" style="line-height: 40px;font-size: 36px;">
                        新用户注册
                    </div>
                    <div class="col-md-6 text-right" style="line-height: 40px;font-size: 22px;">
                        <a href="/index.html" class="btn" style="color: #333;">淘书网首頁</a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" method="POST" action="/register.html" onsubmit="return checkAll();">
                    <div class="form-group">
                        <label for="phone" class="col-sm-2 control-label">手机号码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码" oninput="checkPhone()" onblur="checkPhone()"
                                value="{{if .user}}{{.user.Phone}}{{end}}">
                            <span id="helpPhone" class="help-block hide">必须收入正确的11位手机号码!</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">登陆密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码" oninput="checkPassword()" onblur="checkPassword()"
                                value="{{if .user}}{{.user.Password}}{{end}}">
                            <span id="helpPwd" class="help-block hide">必须包含大写字母、小写字母和数字且长度6~12位!</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="确认密码" oninput="checkConfiemPassword()"
                                onblur="checkConfiemPassword()" value="{{if .user}}{{.user.ConfirmPassword}}{{end}}">
                            <span id="helpCfmPwd" class="help-block hide">登录密码与确认密码不相符</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input id="ckTip" type="checkbox" onchange="checkTip()" checked>
                                    <strong>我已阅读并同意《淘书网交易条款》和《淘书网社区条款》</strong>
                                </label>
                            </div>
                            <span id="helpCkTip" class="help-block hide" style="color: #a94442;">你必须同意淘书网服务条款后，才能完成注册。</span>
                        </div>
                    </div>
                    <div class="form-group text-center">
                        <button class="btn btn-lg btn-danger" onclick="doRegist()">立刻注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title" style="color: red;">注册失败</h3>
                </div>
                <div class="modal-body">
                    <p style="font-size: 16px;" id="errMsg"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var checkForm = [false, false, false, false]
        $(function () {
            var errCode = eval("{{if .code}}{{.code}}{{else}}0{{end}}")
            if (errCode == 0) {
                return
            }
            checkPhone()
            checkPassword()
            checkTip()
            switch (errCode) {
                case -1:
                    $("#errMsg").html("未知异常,请联系管理员!<br/>{{if .errorMsg}}<strong>{{.errorMsg}}</strong>{{end}}")
                    $('#myModal').modal({ keyboard: false })
                    break;
                case 1:
                $("#errMsg").html("账号已经存在!")
                    $('#myModal').modal({ keyboard: false })
                    break;

            }
        })

        function checkPhone() {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            var $phone = $("#phone")
            checkForm[0] = myreg.test($phone.val())
            if (checkForm[0]) {
                $phone.parent().removeClass("has-error").addClass("has-success")
                $("#helpPhone").removeClass("show").addClass("hide")
            } else {
                $phone.parent().removeClass("has-success").addClass("has-error")
                $("#helpPhone").removeClass("hide").addClass("show")
            }
        }

        function checkPassword() {
            var myreg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
            var $pwd = $("#password")
            checkForm[1] = myreg.test($pwd.val())
            if (checkForm[1]) {
                $pwd.parent().removeClass("has-error").addClass("has-success")
                $("#helpPwd").removeClass("show").addClass("hide")
            } else {
                $pwd.parent().removeClass("has-success").addClass("has-error")
                $("#helpPwd").removeClass("hide").addClass("show")
            }
            checkConfiemPassword()
        }

        function checkConfiemPassword() {
            var $pwd = $("#password")
            var $cfmPwd = $("#confirmPassword")
            checkForm[2] = $pwd.val() == $cfmPwd.val()
            if (checkForm[2]) {
                $cfmPwd.parent().removeClass("has-error").addClass("has-success")
                $("#helpCfmPwd").removeClass("show").addClass("hide")
            } else {
                $cfmPwd.parent().removeClass("has-success").addClass("has-error")
                $("#helpCfmPwd").removeClass("hide").addClass("show")
            }
        }

        function checkTip() {
            checkForm[3] = $("#ckTip").is(":checked");
            var helpCkTip = $("#helpCkTip")
            if (checkForm[3]) {
                helpCkTip.removeClass("show").addClass("hide")
            } else {
                helpCkTip.removeClass("hide").addClass("show")
            }
        }

        function checkAll() {
            checkPhone()
            checkPassword()
            checkTip()
            for (var i = 0; i < checkForm.length; i++) {
                if (!checkForm[i]) {
                    return false
                }
            }
            return true
        }
    </script>
</body>

</html>